<<style lang="less">
  @import './subjects.less';
</style>
<template>
  <div>
    <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">

      <FormItem prop="id" :label="$t('id')">
        <Input v-model="seachForm.id" placeholder="请输入查询文字"></Input>
      </FormItem>

      <FormItem prop="name" :label="$t('name')">
        <Input v-model="seachForm.name" placeholder="请输入查询文字"></Input>
      </FormItem>

      <FormItem prop="verify" :label="$t('verify')">
        <Input v-model="seachForm.verify" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="seachForm.intro" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-create" @click="btnEnterClick" :disabled="!currentRow">进入</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table>
    <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" v-show="!isEditing" />
    <Form v-if="isEditing" :model="dataForm" :label-width="80">

      <FormItem prop="id" :label="$t('id')">
        <Input  readonly="true" v-model="dataForm.id" placeholder="Don't need to enter"></Input>
      </FormItem>

      <FormItem prop="name" :label="$t('name')">
        <Input v-model="dataForm.name" placeholder="Enter something..."></Input>
      </FormItem>

      <FormItem prop="verify" :label="$t('verify')">
        <Input readonly="true" v-model="dataForm.verify" placeholder="Don't need to enter"></Input>
      </FormItem>

       <FormItem prop="price" :label="$t('price')">
        <Input v-model="dataForm.price" placeholder="Enter something..."></Input>
      </FormItem>

       <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="dataForm.intro" placeholder="Enter something..."></Input>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>

    </Form>
  </div>
</template>
<script>
import { getSubjectList, getSubject, addSubject, updateSubject, deleteSubject } from '@/api/subjects'
export default {
  name: 'subjects',
  data() {
    return {
      message: 'Hello Vue!',
      currentRow: null,
      isEditing:false,
      seachForm: 
      {
         id:'',
        name: '',
        verify: '',
        intro: ''
      },
      pageInfo: {
        pageNumber: 1,
        pageSize: 10,
        totalRows: 0
      },
      dataForm: {},
      columns: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, 
      {
        title: this.$t('id'),
        key: 'id'
      },
       {
        title: this.$t('name'),
        key: 'name'
      },
      {
        title: this.$t('verify'),
        key: 'verify'
      }, {
       title: this.$t('price'),
        key: 'price'
      }, {
       title: this.$t('intro'),
        key: 'intro'
      }],
      datas: []
    }
  },
  created() {
    console.log('created message is: ' + this.message);
    this.queryList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods: {
    seacherSubmit: function() {
      console.log(this.seacherForm);
      this.pageInfo.pageNumber = 1;
      this.queryList();
    },
    queryList: function() 
    {
      var queryParams = {
        id:this.seachForm.id, 
        name: this.seachForm.name,
        verify: this.seachForm.verify,
        intro: this.seachForm.intro,
        pageNumber: this.pageInfo.pageNumber,
        pageSize: this.pageInfo.pageSize
      };
      getSubjectList(queryParams).then
      (res =>
       {
        this.datas = res.data.rows;
        this.pageInfo.totalRows = parseInt(res.data.total);
      }
      );
    },
    pageNumberChange: function(pagenum) {
      this.pageInfo.pageNumber = pagenum;
      this.queryList();
    },

    tableCurrentChange: function(currentRow, oldCurrentRow) {
      this.currentRow = currentRow;
    },
    btnAddClick: function() {
      this.dataForm = {};
      this.isEditing = true;
    },
    btnEditClick: function() {
      this.dataForm = this.currentRow;
      this.isEditing = true;
    },
    btnEnterClick: function() {
      this.dataForm = this.currentRow;
  var myComponent =() => import('@/view/settings/chapters.vue')
    var route={
    name:'chapters',
    component:myComponent
}
    
    },
    btnDelClick: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
    btnSaveClick: function() {
      if (this.dataForm.id) {
        updateSubject(this.dataForm).then(res => {    //去掉id
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      } else {
        addSubject(this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick: function() {
      this.isEditing = false;
    },
    delData: function() {
      deleteSubject(this.currentRow.id).then(res => {
        if (res.data&& res.data.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    }
  }
}

</script>